<script setup>
import { ref, reactive, onMounted } from "vue";
import { SwapLeftOutlined } from "@ant-design/icons-vue";
import TextList from "../TextList/index.vue";
const TextListRef = ref(null);
import request from "@/common/utils/request";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

onMounted(() => {
  getDetaile();
});

const state = reactive({
  id: "",
  // 列表数据
  list: [],
  // 卖点
  selling_points: "",
  // 参考文案
  content: "",
  // 产品或公司
  product_name: "",
});

const getDetaile = async () => {
  route.query?.id && (state.id = route.query.id);
  const res = await request.get(
    "/work_ai",
    `/user/shotstack/text/imitation/detail`,
    {
      id: state.id,
    }
  );

  console.log("详情信息", res);
  // 赋值展示的字段和数据
  state.selling_points = res.result.selling_points;
  state.content = res.result.content;
  state.product_name = res.result.product_name;
  state.list = res.result.result_content.map((ele) => {
    return {
      checked: false,
      loding: false,
      titleEdit: false,
      content: ele.subtitle_text_block.join(""),
      title: ele.title,
      id: ele.id,
    };
  });

  TextListRef.value.setList(state.list);
};

const isBack = () => {
  router.push({
    name: "TextImitationList",
  });
};
</script>

<template>
  <div class="CopywritingFissionDetail">
    <div class="title_box">
      <div class="left_title_box">
        <span class="back_text" @click="isBack"
          ><SwapLeftOutlined style="margin-right: 3px" />返回</span
        >
        <h2>文案详情</h2>
      </div>
    </div>

    <div class="text_detail_content">
      <div class="text_detail_left">
        <TextList
          ref="TextListRef"
          :showTitle="false"
          :showEmpty="false"
          :showChangeItem="false"
        >
        </TextList>
      </div>
      <div class="text_detail_right">
        <div class="detail_title">
          <p>文案信息</p>
        </div>

        <div class="detail_content">
          <div class="detail_item">
            <span class="item_title"> 产品或公司 </span>
            <span class="item_content"> {{ state.product_name }} </span>
          </div>
          <div class="detail_item">
            <span class="item_title"> 独特卖点 </span>
            <span class="item_content"> {{ state.selling_points }} </span>
          </div>
          <div class="detail_item">
            <span class="item_title"> 参考文案 </span>
            <span class="item_content">
              {{ state.content }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
@radius: 8px;
@gap: 15px;
@borderColor: #e5e5e5;
.CopywritingFissionDetail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: @gap;
  height: 100%;

  .text_detail_content {
    flex: 1;
    display: flex;
    width: 100%;
    border-radius: @radius;
    gap: 15px;
    overflow: hidden;

    .text_detail_left {
      flex: 1;
      display: flex;
      background: #fff;
      border-radius: @radius;
      overflow: hidden;
    }
    .text_detail_right {
      width: 30%;
      background: #fff;
      border-radius: @radius;
      .detail_content {
        padding: 20px;
        padding-top: 0;
        .detail_item {
          padding-top: 15px;
          padding-bottom: 20px;
          border-bottom: 1px solid @borderColor;
          display: flex;
          flex-direction: column;
          gap: 10px;
          .item_title {
            color: #96969c;
            font-size: 14px;
          }
          .item_content {
            font-size: 14px;
          }
        }
      }

      .detail_title {
        border-bottom: 1px solid @borderColor;
        padding: 20px;
        padding-bottom: 15px;
        p {
          font-size: 16px;
          margin: 0;
        }
      }
    }
  }

  .title_box {
    display: flex;
    justify-content: space-between;
    padding: 10px @gap;

    background-color: #fff;
    border-radius: @radius;
    .left_title_box {
      display: flex;
      gap: 10px;
      align-items: center;
      width: 200px;
      h2 {
        margin: 0;
        font-weight: 600;
        font-size: 16px;
      }
      .back_text {
        color: #767b98;
        transition: all 0.3s;
        cursor: pointer;
        position: relative;
        margin-right: 14px;
        &:hover {
          color: var(--ss-primary-color-hover);
        }
        &::after {
          content: "";
          position: absolute;
          right: -13.5px;
          top: 3.5px;
          width: 0.5px;
          height: 16px;
          background-color: #767b98;
        }
      }
    }
  }
}
</style>
